<template>
    <div
        class="attention-bg"
        v-if="attentionShow"
        @click.prevent.self="closeAttention"
    >
        <img
            class="attention-img"
            src="@/assets/images/about/attention-img.jpg"
        />
    </div>
</template>

<script>
export default {
    name: 'Attention',
    props: ['attentionShow'],
    methods: {
        closeAttention () {
            this.$emit('closeAttention')
        }
    }
}
</script>

<style lang="stylus" scoped>
.attention-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    overflow hidden
    z-index 9
    display flex
    align-items center
    justify-content center
    .attention-img
        width 8rem
        border-radius 10px
</style>
